<!DOCTYPE html>
<html>
<head>
    <title>付款页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- head 中 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

    <!-- body 最后 -->
    <!--<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>-->
    <script src="/static/js/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

    <!-- 如果使用了某些拓展插件还需要额外的JS -->
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
    <script src="/static/js/utils.js"></script>
    <link href="../../css/zhangdan.css" rel="stylesheet" type="text/css"/>
</head>

<style type="text/css">
    html, body, .context-center {
        height: 100%;
    }

    .center_rent {
        height: 12%;
        background-color: #0095FF;
        padding: 2rem 2rem 2rem 2rem;
    }

    .rent_nei {
        width: 100%;
        height: 100%;
        background-color: #fbf8f9;
        border-radius: 0.5rem;
    }

    .rent_img {
        height: 100%;
        width: 20%;
        float: left;
    }

    .rent_title {
        height: 30%;
        font: 400 1.8rem/4rem "PingFang-SC-Bold";
        text-indent: 2rem;
        color: #0095FF;
        width: 80%;
    }

    .rent_time {
        height: 30%;
        font: 400 1.4rem/4rem "PingFang-SC-Bold";
        text-indent: 2rem;
        color: #0095FF;
        width: 80%;
    }

    .center_content {
        height: 40%;
    }

    .content_fang, .content_people, .content_phone, .content_fu_time, .content_contract, .lower_part_invoice {
        height: 20%;
        border-bottom: 0.5pt solid #a9a3a3;
    }

    span {
        display: block;
    }

    .title_key {
        width: 35%;
        float: left;
        height: 100%;
        font: 400 1.6rem/5rem "PingFang-SC-Bold";
        text-indent: 2rem;
        color: #999999;
    }

    .title_val {
        width: 65%;
        float: left;
        height: 100%;
        font: 400 1.6rem/5rem "PingFang-SC-Bold";
        text-indent: 2rem;
    }

    .content_row_bg_bar {
        height: 2%;
        background-color: #c0c0c166;
    }

    .center_lower_part {
        height: 46%;
    }

    .lower_part_describe {
        height: 62%;
        background-color: #c0c0c166;
        font: 400 1.6rem/5rem "PingFang-SC-Bold";
        text-indent: 2rem;
        color: #999999;
    }

    .lower_part_price {
        height: 18%;
    }

    .part_price {
        width: 50%;
        height: 100%;
        float: left;
    }

    .price_name {
        height: 100%;
        width: 30%;
        float: left;
        font: 500 1.4rem/5.5rem "PingFang-SC-Bold";
        text-align: right;
    }

    .price_val {
        height: 100%;
        width: 70%;
        float: left;
        font: 400 1.8rem/5.5rem "PingFang-SC-Bold";
        text-indent: 1rem;
        color: #FF0000;
    }

    .part_price_btn {
        width: 50%;
        height: 100%;
        float: left;
        padding: -1.5rem 1rem 1rem 1rem;
        padding-top: 0.2rem;
    }

    .price_btn {
        height: 3rem;
        width: 10rem;
        background-color: #0095FF;
        border-radius: 0.5rem;
        float: right;
        margin-right: 1rem;
        text-align: center;
        font: 400 1.6rem/3rem "PingFang-SC-Bold";
        margin-top: 1rem;
        color: #FFFFFF;
    }

    .img_val {
        width: 70%;
        height: 70%;
        float: right;
    }

    .contract_name {
        color: #0095FF;
    }

</style>
<body>
<div class="context-center">
    <!--房租标题-->
    <div class="center_rent">
        <div class="rent_nei">
            <span class="rent_img"><img src="/static/weixin/images/fukuan.png" alt="" class="img_val"></span>
            <span class="rent_title">房租</span>
            <span class="rent_time">2018-02-01 至 2018-03-01</span>
        </div>
    </div>
    <!--房租内容-->
    <div class="center_content">
        <div class="content_fang">
            <span class="fang_tilte title_key"> 房间</span>
            <span class="fang_name  title_val"> 东关203 401室</span>
        </div>

        <div class="content_people">
            <span class="people_title title_key">签订人</span>
            <span class="people_name title_val">
                <div class="weui-cell__bd">
                         <input  class="weui-input" type="text" placeholder="签订人" >
                 </div>
            </span>
        </div>
        <div class="content_phone">
            <span class="phone_title title_key">境内手机</span>
            <span class="phone_name title_val">
                <div class="weui-cell__bd">
                <input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="用于接受通知">
             </div>
            </span>
        </div>
        <div class="content_fu_time">
            <span class="fu_time_title title_key">应付支付日期</span>
            <span class="fu_time_name title_val">2018-01-31</span>
        </div>

        <div class="content_contract">
            <span class="contract_title title_key">合同</span>
            <span class="contract_name title_val">查看点击详情</span>
        </div>

    </div>
    <div class="content_row_bg_bar">

    </div>

    <div class="center_lower_part">
        <div class="lower_part_invoice">
            <span class="invoice_title title_key">发票</span>
            <span class="invoice_name title_val">如需要发票，可想开发商索取</span>
        </div>
        <div class="lower_part_describe">
            <span class="describe">隐私无忧！</span>
        </div>
        <div class="lower_part_price">
            <div class="part_price">
                <span class="price_name">总额</span>
                <span class="price_val">￥3500</span>
            </div>
            <div class="part_price_btn">
                <span class="price_btn">确认支付</span>
            </div>
        </div>


    </div>


</div>


</body>

<script>

    $(function () {
        var zhangId = utils.getParamer("zhangId");
        debugger
        var params={
            "BILLID": zhangId
        }
        var url = "/weixin/findbyBill.do";
        $.ajax({
            url: url,
            dataType: "json",
            data:params,
            async: false,
            success: function (data) {
                var bill = data.bill;
               $(".rent_title").html(bill.BILL_NAME);  //房租
                $(".rent_time").html(bill.START_DATE +"至"+ bill.END_DATE);  //开始 至结束时间
                $(".fang_name").html(bill.BUSINESS_NAME +" "+bill.ROOM_NUM);  //圈 室
                $(".fu_time_name ").html(bill.PAY_DATE);  //应付支付日期
                $(".price_val ").html("￥"+bill.TOTAL_PRICE);  //总金额


            },
        });

    });

</script>
</html>